/** ==============定义变量================ */
var gameSprites = document.querySelector(".game-sprites")
var scoreLable = document.querySelector("#scoreLable")
var resultScore = document.querySelector("#resultScore")
var resultPage = document.querySelector("#resultPage")
var startBtn = document.querySelector("#startBtn")
var startPage = document.querySelector("#startPage")
var restart = document.querySelector("#restart")
// 音效
var bgmusic = document.querySelector("#bgmusic")
var eatmusic = document.querySelector("#eatmusic")
var failmusic = document.querySelector("#failmusic")

var food = null;
var score = 0;
var timer = null;
var bodys = []
var speed = 200;
// 方向
var direction = {
    x: 1,
    y: 0
}
// 是否做碰撞检测
var isCollision = false
// 是否检测边界
var isEdge = false



/**==============定义函数================ */

 // 播放背景音乐
function 播放音乐() {
    bgmusic.play()
}


// 生成蛇头
function 生成头部() {
    // 创建头部
    var div = document.createElement('div')
    // 设置头部内容图片
    div.innerText = "🦁"
    div.className = "snake-body"
    // 设置头部位置
    div.style.left = "100px"
    div.style.top = "100px"
    // 把头部添加到页面上
    gameSprites.appendChild(div)
    bodys.push(div)
}


// 通过定时器，定时刷新元素位置
function 移动动画() {

    scoreLable.style.display = 'block'

    // 开启定时器，开始移动动画
    timer = setInterval(function () {

        for (var i = bodys.length - 1; i > -1; i--) {

            if (i == 0) {
                var b = bodys[i]
                b.style.left = b.offsetLeft + b.offsetWidth * direction.x + 'px'
                b.style.top = b.offsetTop + b.offsetWidth * direction.y + 'px'
            } else {
                var cur = bodys[i]
                var last = bodys[i - 1]

                cur.style.left = last.offsetLeft + 'px'
                cur.style.top = last.offsetTop + 'px'
            }
        }


        // 判断是否吃到食物
        if (isCollision && 碰撞检测(bodys[0], food)) {
            // console.log("吃到！！！")
            //  食物消失
            食物消失()
            score++;
            scoreLable.innerText = score;

            // 蛇增长
            身体长大()
            // 吃食物音效
            eatmusic.play()
        }


        if (isEdge) {
            // 边界检测
            if (bodys[0].offsetLeft < 0 || bodys[0].offsetLeft > window.innerWidth || bodys[0].offsetTop < 0 || bodys[0].offsetTop > window.innerHeight) {
                // 游戏结束
                游戏结束()
            }
        } else {
            bodys[0].style.left = bodys[0].offsetLeft < 0 ? Math.floor(window.innerWidth / 50) * 50 + "px" : bodys[0].offsetLeft + "px"
            bodys[0].style.left = bodys[0].offsetLeft > window.innerWidth ? '0px' : bodys[0].offsetLeft + 'px'

            bodys[0].style.top = bodys[0].offsetTop < 0 ? Math.floor(window.innerHeight / 50) * 50 + "px" : bodys[0].offsetTop + 'px'
            bodys[0].style.top = bodys[0].offsetTop > window.innerHeight ? '0px' : bodys[0].offsetTop + 'px'
        }

    }, speed)
}

// 使用按键控制移动方向
function 控制移动方向() {
    // 监听键盘按键
    window.addEventListener("keypress", function (e) {

        switch (e.key) {
            case "w": direction.x = 0; direction.y = -1; break;
            case "a": direction.x = -1; direction.y = 0; break;
            case "s": direction.x = 0; direction.y = 1; break;
            case "d": direction.x = 1; direction.y = 0; break;
        }
    })
}


// 生成食物
function 生成食物() {
    food = document.createElement('div')
    food.innerText = "🍎"
    food.className = "snake-body"
    // 随机坐标
    food.style.left = Math.floor(Math.random() * (window.innerWidth / 50)) * 50 + "px"
    food.style.top = Math.floor(Math.random() * (window.innerHeight / 50)) * 50 + "px"
    // 添加到父元素
    gameSprites.appendChild(food)
}

// 是否开启碰撞检测
function 开始碰撞检测() {
    isCollision = true;
}

// 是否检测边界
function 检测边界() {
    isEdge = true;
}

// 游戏结束
function 游戏结束() {
    console.log("game over")

    bgmusic.pause()
    bgmusic.currentTime = 0;

    failmusic.play()

    clearInterval(timer)

    // 显示结果
    resultScore.innerText = score;
    resultPage.style.display = "block"

    scoreLable.style.display = "none"

}


// 食物消失
function 食物消失() {
    food.style.left = Math.floor(Math.random() * (window.innerWidth / 50)) * 50 + "px"
    food.style.top = Math.floor(Math.random() * (window.innerHeight / 50)) * 50 + "px"
}

// 身体增长一节
function 身体长大() {
    var div = document.createElement('div')
    div.innerText = "🍎"
    div.className = "snake-body"
    // 随机坐标
    div.style.left = bodys[0].offsetLeft + 'px'
    div.style.top = bodys[0].offsetTop + 'px'
    // 添加到父元素
    gameSprites.appendChild(div)

    bodys.push(div)
}

// 碰撞检测：检测蛇头的坐标是否和食物的坐标相等
function 碰撞检测(a, b) {
    if (a && b) {
        if (a.offsetLeft == b.offsetLeft && a.offsetTop == b.offsetTop) {
            return true
        } else {
            return false
        }
    }
}

